<template>
  <div class="phone-container">
    <!-- 手机外壳 -->
    <div class="phone-frame">
      <!-- 音量键 -->
      <div class="volume-buttons">
        <div class="volume-up"></div>
        <div class="volume-down"></div>
      </div>

      <!-- 开机键 -->
      <div class="power-button"></div>

      <!-- 静音开关 -->
      <div class="mute-switch"></div>

      <!-- 手机屏幕内容 -->
      <div class="phone-screen">
        <div class="order-application-container">
          <!-- 顶部导航栏 -->
          <van-nav-bar title="开单申请" left-arrow fixed placeholder @click-left="goBack" class="custom-nav">
            <template #right>
              <van-icon name="ellipsis" size="20" />
              <van-icon name="question-o" size="20" style="margin-left: 12px" />
            </template>
          </van-nav-bar>

          <!-- 主要内容区域 -->
          <div class="content">
            <!-- 选项卡导航 -->
            <div class="tab-header">
              <van-tabs v-model:active="activeTab" @change="onTabChange" class="custom-tabs">
                <van-tab v-for="tab in mainTabs" :key="tab.id" :title="tab.name"
                  :name="tab.code.toLowerCase()"></van-tab>
              </van-tabs>

              <!-- 开单记录按钮 -->
              <div class="record-btn" @click="viewRecords">
                开单记录 <van-icon name="arrow" size="12" />
              </div>
            </div>

            <!-- 内容区域 -->
            <div class="tab-content">
              <!-- 分类侧边栏 -->
              <div class="category-sidebar">
                <van-loading v-if="categoryLoading" class="loading-container" size="20px">
                  加载中...
                </van-loading>
                <div v-else-if="currentCategories.length === 0" class="empty-tip">
                  暂无分类
                </div>
                <div v-else>
                  <div v-for="category in currentCategories" :key="category.id"
                    :class="['category-item', { active: selectedCategory === category.id }]"
                    @click="selectCategory(category.id)">
                    {{ category.name }}
                  </div>
                </div>
              </div>

              <!-- 项目列表 -->
              <div class="items-list">
                <van-loading v-if="itemsLoading" class="loading-container" size="24px">
                  加载中...
                </van-loading>
                <div v-else-if="currentItems.length === 0" class="empty-tip">
                  暂无项目
                </div>
                <div v-else>
                  <!-- 药品项目 -->
                  <div v-if="activeTab === 'medicine'" v-for="item in currentItems" :key="`medicine-${item.id}`"
                    class="medicine-item">
                    <div class="item-image">
                      <div class="image-placeholder">
                        <van-icon name="photo" size="24" color="#ccc" />
                      </div>
                    </div>
                    <div class="item-info">
                      <div class="item-name">{{ item.name }}</div>
                      <div class="item-desc">功效：提高免疫力，预防疾病</div>
                      <div class="item-price">¥ {{ item.price }}</div>
                      <div class="item-tags">
                        <span class="tag">处方药</span>
                        <span class="tag">限购5剂</span>
                      </div>
                    </div>
                    <div class="item-actions">
                      <van-stepper v-model="item.quantity" min="0" @change="updateQuantity(item)" button-size="24px"
                        input-width="40px" />
                    </div>
                  </div>

                  <!-- 检查项目 -->
                  <div v-else-if="activeTab === 'examination'" v-for="item in currentItems" :key="`exam-${item.id}`"
                    class="exam-item">
                    <div class="item-info">
                      <div class="item-name">{{ item.name }}</div>
                      <div class="item-price">¥ {{ item.price }}/次</div>
                    </div>
                    <div class="item-actions">
                      <van-stepper v-model="item.quantity" min="0" @change="updateQuantity(item)" button-size="24px"
                        input-width="40px" />
                    </div>
                  </div>

                  <!-- 检验项目 -->
                  <div v-else-if="activeTab === 'laboratory'" v-for="item in currentItems" :key="`test-${item.id}`"
                    class="exam-item">
                    <div class="item-info">
                      <div class="item-name">{{ item.name }}</div>
                      <div class="item-price">¥ {{ item.price }}/次</div>
                    </div>
                    <div class="item-actions">
                      <van-stepper v-model="item.quantity" min="0" @change="updateQuantity(item)" button-size="24px"
                        input-width="40px" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 底部购物车 -->
          <div class="bottom-cart" @click="showCartPopup = true">
            <div class="cart-info">
              <van-icon name="shopping-cart-o" size="20" color="#4285f4" />
              <span class="cart-text">已选 {{ totalSelectedItems }} 项</span>
              <span class="cart-total">合计: ¥ {{ totalAmount.toFixed(2) }}</span>
            </div>
            <van-button type="primary" round @click.stop="submitOrder" :disabled="totalSelectedItems === 0"
              class="submit-btn">
              提交
            </van-button>
          </div>

          <!-- 调试按钮 -->
          <div style="position: absolute; top: 10px; right: 10px; z-index: 1000;">
            <van-button size="small" @click="debugData">调试</van-button>
          </div>

          <!-- 已选项目弹窗 -->
          <div v-if="showCartPopup" class="cart-popup-overlay" @click="showCartPopup = false">
            <div class="cart-popup-container" @click.stop>
              <div class="cart-popup-content">
                <div class="cart-popup-header">
                  <span>已选项目</span>
                  <span class="clear-btn" @click="clearAll">全部清空</span>
                </div>
                <div class="cart-popup-list">
                  <template v-for="item in selectedItems" :key="item.id + (item.name || '')">
                    <div class="cart-popup-item">
                      <div class="item-main">
                        <span v-if="item.type === 'medicine'" class="tag tag-medicine">药</span>
                        <span v-if="item.type === 'examination'" class="tag tag-exam">查</span>
                        <span v-if="item.type === 'test'" class="tag tag-test">检</span>
                        <span class="item-name">{{ item.name }}</span>
                        <span class="item-quantity">×{{ item.quantity }}</span>
                      </div>
                      <div class="item-price">
                        ¥ {{ (item.price * item.quantity).toFixed(2) }}
                        <span v-if="item.unit">/{{ item.unit }}</span>
                      </div>
                    </div>
                  </template>
                  <div v-if="selectedItems.length === 0" class="empty-tip">暂无已选项目</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { getCheckItemTypeList, getCheckItemList, getSelectedItemsDetail, calculateOrderSummary } from '@/api/checkItem'
import type { CheckItem, CheckItemType } from '@/types/api'

// 扩展CheckItem类型以包含UI状态
interface UIItem extends CheckItem {
  quantity?: number;
  selected?: boolean;
}

// 主选项卡类型
interface MainTab {
  id: number;
  name: string;
  code: string;
  level: number;
}

const router = useRouter()

// 主选项卡（一级分类）
const mainTabs = ref<MainTab[]>([])
const activeTab = ref('')
const selectedCategory = ref(0)

// 控制购物车弹窗显示
const showCartPopup = ref(false)

// 加载状态
const categoryLoading = ref(false)
const itemsLoading = ref(false)

// 当前分类和项目
const currentCategories = ref<CheckItemType[]>([])
const currentItems = ref<UIItem[]>([])

// 所有项目数据（按类型分组）
const allItems = ref<Record<string, UIItem[]>>({
  medicine: [],
  examination: [],
  test: [],
  laboratory: []
})

// 组合所有已选项目
interface MedicineItem {
  id: number;
  name: string;
  price: number;
  quantity: number;
  type: 'medicine';
  unit: string;
}
interface ExamOrTestItem {
  id: number;
  name: string;
  price: number;
  quantity: number;
  type: 'examination' | 'test';
  unit: string;
}
type SelectedItem = MedicineItem | ExamOrTestItem;

const selectedItems = computed<SelectedItem[]>(() => {
  console.log('开始计算已选项目...')
  console.log('当前activeTab:', activeTab.value)
  console.log('allItems当前状态:', allItems.value)

  const medicine = allItems.value.medicine.filter(item => (item.quantity || 0) > 0).map(item => ({
    id: item.id,
    name: item.name,
    price: item.price,
    quantity: item.quantity || 0,
    type: 'medicine' as const,
    unit: item.name.includes('剂') ? '剂' : (item.name.includes('盒') ? '盒' : '')
  }))
  const exam = allItems.value.examination.filter(item => (item.quantity || 0) > 0).map(item => ({
    id: item.id,
    name: item.name,
    price: item.price,
    quantity: item.quantity || 0,
    type: 'examination' as const,
    unit: '次'
  }))
  const test = allItems.value.laboratory.filter(item => (item.quantity || 0) > 0).map(item => ({
    id: item.id,
    name: item.name,
    price: item.price,
    quantity: item.quantity || 0,
    type: 'test' as const,
    unit: '次'
  }))

  const result = [...medicine, ...exam, ...test]
  console.log('已选项目计算结果:', {
    medicine: allItems.value.medicine.map(item => ({ id: item.id, name: item.name, quantity: item.quantity })),
    exam: allItems.value.examination.map(item => ({ id: item.id, name: item.name, quantity: item.quantity })),
    test: allItems.value.laboratory.map(item => ({ id: item.id, name: item.name, quantity: item.quantity })),
    result
  })

  // 特别检查检验项目
  console.log('检验项目详细检查:')
  console.log('- laboratory数组长度:', allItems.value.laboratory.length)
  console.log('- laboratory数组内容:', allItems.value.laboratory)
  console.log('- 过滤后的test项目:', test)

  return result
})

// 监控allItems的变化
watch(allItems, (newVal) => {
  console.log('allItems发生变化:', newVal)
}, { deep: true })

// 监控selectedItems的变化
watch(selectedItems, (newVal) => {
  console.log('selectedItems发生变化:', newVal)
}, { deep: true })

// 监控弹窗显示状态
watch(showCartPopup, (newVal) => {
  if (newVal) {
    // 弹窗打开时调用后端方法
    fetchSelectedItemsFromBackend()
    calculateOrderSummaryFromBackend()
  }
})

// 清空所有已选项目
const clearAll = () => {
  Object.values(allItems.value).forEach(items => {
    items.forEach(item => {
      item.quantity = 0
      item.selected = false
    })
  })
  showCartPopup.value = false
}

// 获取主选项卡（一级分类）
const fetchMainTabs = async () => {
  try {
    const response = await getCheckItemTypeList()
    console.log('主选项卡响应:', response);

    if (response.code === 100) {
      // 获取一级分类（Level=1）
      mainTabs.value = (response.data || [])
        .filter(item => item.level === 1)
        .map(item => ({
          id: item.id,
          name: item.name,
          code: item.code || item.name.toLowerCase(),
          level: item.level
        }))
        .sort((a, b) => a.id - b.id)

      console.log('主选项卡数据:', mainTabs.value);
      console.log('每个选项卡的详细信息:');
      mainTabs.value.forEach((tab, index) => {
        console.log(`选项卡${index + 1}:`, {
          id: tab.id,
          name: tab.name,
          code: tab.code,
          level: tab.level
        });
      });

      if (mainTabs.value.length > 0) {
        // 确保activeTab的值与allItems的键匹配
        const firstTab = mainTabs.value[0];
        activeTab.value = firstTab.code.toLowerCase();
        console.log('设置第一个选项卡:', activeTab.value);
        console.log('第一个选项卡的完整信息:', firstTab);
        await fetchCategories(firstTab.id)
      }
    }
  } catch (error) {
    console.error('获取主选项卡失败:', error)
    showToast('获取主选项卡失败')
  }
}

// 获取分类（二级分类）
const fetchCategories = async (parentId: number) => {
  categoryLoading.value = true
  console.log('开始获取分类，parentId:', parentId)
  try {
    const response = await getCheckItemTypeList(parentId)
    console.log('分类响应:', response);

    if (response.code === 100) {
      currentCategories.value = response.data || []
      console.log('分类数据:', currentCategories.value);
      console.log('分类数量:', currentCategories.value.length);

      if (currentCategories.value.length > 0) {
        selectedCategory.value = currentCategories.value[0].id
        console.log('选择第一个分类:', selectedCategory.value)
        await fetchItems(selectedCategory.value)
      } else {
        // 如果没有二级分类，直接获取一级分类下的项目
        console.log('没有二级分类，直接获取一级分类下的项目')
        await fetchItems(parentId)
      }
    } else {
      console.error('获取分类失败，响应码:', response.code)
    }
  } catch (error) {
    console.error('获取分类失败:', error)
    showToast('获取分类失败')
  } finally {
    categoryLoading.value = false
  }
}

// 获取项目
const fetchItems = async (typeId: number) => {
  itemsLoading.value = true
  console.log('开始获取项目，typeId:', typeId)
  console.log('当前activeTab:', activeTab.value)
  try {
    const response = await getCheckItemList(typeId)
    console.log('项目响应:', response);

    if (response.code === 100) {
      // 为每个项目添加UI状态
      let items = (response.data || []).map(item => ({
        ...item,
        quantity: 0,
        selected: false
      }))

      console.log('原始项目数据:', items);
      console.log('项目数量:', items.length);

      // 如果API返回空数据，添加一些测试数据
      if (items.length === 0 && activeTab.value === 'test') {
        console.log('API返回空数据，添加测试数据');
        items = [
          {
            id: 101,
            name: '血常规',
            price: 15.00,
            typeId: typeId,
            quantity: 0,
            selected: false,
            isEnabled: true,
            sortOrder: 1
          },
          {
            id: 102,
            name: '血常规+网织红细胞',
            price: 38.00,
            typeId: typeId,
            quantity: 0,
            selected: false,
            isEnabled: true,
            sortOrder: 2
          },
          {
            id: 103,
            name: '肝功',
            price: 38.00,
            typeId: typeId,
            quantity: 0,
            selected: false,
            isEnabled: true,
            sortOrder: 3
          },
          {
            id: 104,
            name: '肾功',
            price: 45.00,
            typeId: typeId,
            quantity: 0,
            selected: false,
            isEnabled: true,
            sortOrder: 4
          },
          {
            id: 105,
            name: '血糖',
            price: 12.00,
            typeId: typeId,
            quantity: 0,
            selected: false,
            isEnabled: true,
            sortOrder: 5
          }
        ];
        console.log('添加的测试数据:', items);
      }

      console.log('最终项目数据:', items);
      console.log('项目数量:', items.length);

      // 根据当前选项卡类型更新allItems，但保留已有的数量数据
      const tabType = activeTab.value
      const existingItems = allItems.value[tabType] || []

      console.log('当前选项卡类型:', tabType);
      console.log('allItems的所有键名:', Object.keys(allItems.value));
      console.log('现有项目数量:', existingItems.length);

      // 合并数据，保留已有的数量设置
      const mergedItems = items.map(newItem => {
        const existingItem = existingItems.find(item => item.id === newItem.id)
        return {
          ...newItem,
          quantity: existingItem ? existingItem.quantity : 0,
          selected: existingItem ? existingItem.selected : false
        }
      })

      console.log('合并后的项目数据:', mergedItems);

      // 使用Vue的响应式更新方式
      allItems.value[tabType] = mergedItems

      // 让currentItems指向allItems中的同一组数据
      currentItems.value = allItems.value[tabType]

      console.log('项目数据:', items);
      console.log('allItems更新后:', allItems.value);
      console.log('currentItems更新后:', currentItems.value);
      console.log('currentItems更新后数量:', currentItems.value.length);
    } else {
      console.error('获取项目失败，响应码:', response.code)
    }
  } catch (error) {
    console.error('获取项目失败:', error)
    showToast('获取项目失败')
  } finally {
    itemsLoading.value = false
  }
}

const totalSelectedItems = computed(() => {
  const medicineCount = allItems.value.medicine.reduce((sum, item) => sum + (item.quantity || 0), 0)
  const examCount = allItems.value.examination.reduce((sum, item) => sum + (item.quantity || 0), 0)
  const testCount = allItems.value.laboratory.reduce((sum, item) => sum + (item.quantity || 0), 0)
  return medicineCount + examCount + testCount
})

const totalAmount = computed(() => {
  const medicineAmount = allItems.value.medicine.reduce((sum, item) => sum + (item.price * (item.quantity || 0)), 0)
  const examAmount = allItems.value.examination.reduce((sum, item) => sum + ((item.quantity || 0) * item.price), 0)
  const testAmount = allItems.value.laboratory.reduce((sum, item) => sum + ((item.quantity || 0) * item.price), 0)
  return medicineAmount + examAmount + testAmount
})

// 方法
const goBack = () => {
  router.back()
}

const onTabChange = async (name: string) => {
  console.log('onTabChange被调用，原始name:', name);
  console.log('onTabChange被调用，name.toLowerCase():', name.toLowerCase());

  // 确保使用小写的选项卡值
  activeTab.value = name.toLowerCase()
  console.log('切换到选项卡:', activeTab.value)
  console.log('所有主选项卡:', mainTabs.value)

  const currentTab = mainTabs.value.find(tab => tab.code.toLowerCase() === name.toLowerCase())
  console.log('找到的当前选项卡:', currentTab)

  if (currentTab) {
    console.log('开始获取分类，parentId:', currentTab.id)
    await fetchCategories(currentTab.id)
  } else {
    console.error('未找到对应的选项卡:', name)
  }
}

const selectCategory = async (categoryId: number) => {
  selectedCategory.value = categoryId
  await fetchItems(categoryId)
}

const updateQuantity = (item: UIItem) => {
  // 数量更新逻辑
  console.log('更新数量前:', item)
  console.log('当前activeTab:', activeTab.value)

  // 确保数量不为负数
  if (item.quantity && item.quantity < 0) {
    item.quantity = 0
  }

  // 由于currentItems和allItems现在指向同一组数据，不需要额外同步
  console.log('更新数量后:', item)
  console.log('allItems当前状态:', allItems.value)
  console.log('当前选项卡数据:', allItems.value[activeTab.value])
}

const viewRecords = () => {
  showToast('查看开单记录')
  router.push('/order-record')
}

const submitOrder = () => {
  if (totalSelectedItems.value === 0) {
    showToast('请选择至少一项服务')
    return
  }

  // 准备传递的数据
  const orderData = {
    selectedItems: selectedItems.value,
    totalAmount: totalAmount.value,
    totalItems: totalSelectedItems.value
  }

  // 跳转到开单确认页面，并传递数据
  router.push({
    path: '/order-confirm',
    query: {
      data: JSON.stringify(orderData)
    }
  })
}

const debugData = () => {
  console.log('当前选项卡:', activeTab.value);
  console.log('当前分类:', selectedCategory.value);
  console.log('当前项目:', currentItems.value);
  console.log('所有项目数据:', allItems.value);
  console.log('已选项目:', selectedItems.value);
  console.log('总数量:', totalSelectedItems.value);
  console.log('总金额:', totalAmount.value);

  // 检查数据存储情况
  console.log('medicine数组长度:', allItems.value.medicine.length);
  console.log('examination数组长度:', allItems.value.examination.length);
  console.log('test数组长度:', allItems.value.laboratory.length);

  // 特别检查检验项目
  if (activeTab.value === 'test' && currentItems.value.length > 0) {
    console.log('当前是检验选项卡，测试检验项目数据流');
    const testItem = currentItems.value[0];
    testItem.quantity = 2;
    console.log('手动设置第一个检验项目数量为2:', testItem);
    console.log('检验项目数据已更新，allItems状态:', allItems.value);
  }

  // 测试：手动设置一个项目的数量
  if (currentItems.value.length > 0) {
    const testItem = currentItems.value[0];
    testItem.quantity = 2;
    console.log('手动设置第一个项目数量为2:', testItem);

    // 由于currentItems和allItems现在指向同一组数据，不需要额外同步
    console.log('数据已同步，allItems状态:', allItems.value);
  }
}

// 获取后端处理的已选项目详情
const fetchSelectedItemsFromBackend = async () => {
  try {
    const selectedItemIds = selectedItems.value.map(item => item.id);
    if (selectedItemIds.length === 0) {
      console.log('暂无已选项目');
      return;
    }

    const response = await getSelectedItemsDetail(selectedItemIds);
    console.log('后端已选项目详情:', response);

    if (response.code === 100) {
      // 这里可以处理后端返回的详细数据
      console.log('已选项目详细信息:', response.data);
    }
  } catch (error) {
    console.error('获取已选项目详情失败:', error);
  }
}

// 计算后端处理的订单摘要
const calculateOrderSummaryFromBackend = async () => {
  try {
    const orderItems = selectedItems.value.map(item => ({
      ItemId: item.id,
      Quantity: item.quantity
    }));

    if (orderItems.length === 0) {
      console.log('暂无已选项目');
      return;
    }

    const response = await calculateOrderSummary(orderItems);
    console.log('后端订单摘要:', response);

    if (response.code === 100) {
      // 这里可以处理后端返回的摘要数据
      console.log('订单摘要信息:', response.data);
    }
  } catch (error) {
    console.error('计算订单摘要失败:', error);
  }
}

onMounted(async () => {
  // 初始化数据
  console.log('组件挂载，初始化数据');
  await fetchMainTabs()
})
</script>

<style scoped>
/* 手机容器 */
.phone-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* 手机外壳 */
.phone-frame {
  position: relative;
  width: 375px;
  height: 812px;
  background: #1a1a1a;
  border-radius: 40px;
  padding: 8px;
  box-shadow:
    0 0 0 2px #2a2a2a,
    0 20px 40px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px #3a3a3a;
}

/* 音量键 */
.volume-buttons {
  position: absolute;
  left: -2px;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
}

.volume-up,
.volume-down {
  width: 4px;
  height: 30px;
  background: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 开机键 */
.power-button {
  position: absolute;
  right: -2px;
  top: 120px;
  width: 4px;
  height: 60px;
  background: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 静音开关 */
.mute-switch {
  position: absolute;
  left: -2px;
  top: 200px;
  width: 4px;
  height: 25px;
  background: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 手机屏幕 */
.phone-screen {
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 32px;
  overflow: hidden;
  position: relative;
}

.order-application-container {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding-bottom: 80px;
}

.custom-nav {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

:deep(.van-nav-bar__title) {
  color: white;
  font-weight: 500;
}

:deep(.van-nav-bar__left .van-icon),
:deep(.van-nav-bar__right .van-icon) {
  color: white;
}

.content {
  padding: 0;
}

.tab-header {
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 16px;
}

.custom-tabs {
  flex: 1;
}

:deep(.van-tabs__nav) {
  background: white;
}

:deep(.van-tab) {
  font-size: 16px;
  font-weight: 500;
}

:deep(.van-tab--active) {
  color: #4285f4;
}

:deep(.van-tabs__line) {
  background: #4285f4;
}

.record-btn {
  color: #4285f4;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.tab-content {
  display: flex;
  height: calc(100vh - 260px);
}

.category-sidebar {
  width: 100px;
  background: #f5f5f5;
  padding: 8px 0;
  overflow-y: auto;
}

.category-item {
  padding: 12px 8px;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  border-right: 3px solid transparent;
  transition: all 0.3s ease;
}

.category-item:hover {
  background: #e8f4fd;
}

.category-item.active {
  background: white;
  color: #4285f4;
  border-right-color: #4285f4;
  font-weight: 500;
}

.items-list {
  flex: 1;
  background: white;
  overflow-y: auto;
  padding: 8px;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
}

.empty-tip {
  text-align: center;
  color: #bbb;
  padding: 30px 0;
}

/* 药品项目样式 */
.medicine-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.item-image {
  width: 50px;
  height: 50px;
  background: #f5f5f5;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
}

.item-info {
  flex: 1;
  min-width: 0;
}

.item-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
  line-height: 1.3;
}

.item-desc {
  font-size: 12px;
  color: #666;
  margin-bottom: 6px;
  line-height: 1.2;
}

.item-price {
  font-size: 15px;
  color: #e74c3c;
  font-weight: 500;
  margin-bottom: 6px;
}

.item-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.tag {
  background: #e3f2fd;
  color: #4285f4;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10px;
}

.item-actions {
  margin-top: 6px;
  flex-shrink: 0;
}

/* 检查和检验项目样式 */
.exam-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.exam-item .item-info {
  flex: 1;
  min-width: 0;
}

.exam-item .item-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
  line-height: 1.3;
}

.exam-item .item-price {
  font-size: 15px;
  color: #e74c3c;
  font-weight: 500;
}

.exam-item .item-actions {
  margin-top: 6px;
  flex-shrink: 0;
}

.item-note {
  font-size: 12px;
  color: #e74c3c;
  margin-top: 4px;
}

.item-checkbox {
  margin-left: 12px;
  flex-shrink: 0;
}

/* 底部购物车 */
.bottom-cart {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 12px 16px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.cart-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.cart-text {
  font-size: 14px;
  color: #666;
}

.cart-total {
  font-size: 16px;
  font-weight: 500;
  color: #e74c3c;
  margin-left: auto;
  margin-right: 12px;
}

.submit-btn {
  width: 80px;
  height: 40px;
  font-size: 14px;
  font-weight: 500;
}

:deep(.van-button--primary) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

:deep(.van-button--disabled) {
  background: #ccc !important;
}

/* 手机外壳响应式 */
@media (max-width: 420px) {
  .phone-frame {
    width: 100%;
    height: 100vh;
    border-radius: 0;
    padding: 0;
  }

  .phone-screen {
    border-radius: 0;
  }

  .volume-buttons,
  .power-button,
  .mute-switch {
    display: none;
  }
}

.cart-popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
}

.cart-popup-container {
  width: 100%;
  background: white;
  border-radius: 16px 16px 0 0;
  max-height: 70%;
  min-height: 50%;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.cart-popup-content {
  padding: 20px 16px 16px 16px;
  max-height: 100%;
  overflow-y: auto;
}

.cart-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

.clear-btn {
  color: #4285f4;
  font-size: 14px;
  cursor: pointer;
}

.cart-popup-list {
  max-height: 40vh;
  overflow-y: auto;
}

.cart-popup-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.cart-popup-item:last-child {
  border-bottom: none;
}

.item-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.tag {
  display: inline-block;
  font-size: 12px;
  border-radius: 4px;
  padding: 2px 6px;
  margin-right: 4px;
  color: #fff;
  font-weight: 500;
}

.tag-medicine {
  background: #4fc3f7;
}

.tag-exam {
  background: #ff7043;
}

.tag-test {
  background: #e74c3c;
}

.item-name {
  font-size: 15px;
  color: #333;
  font-weight: 500;
  flex: 1;
  min-width: 0;
}

.item-quantity {
  color: #999;
  font-size: 13px;
  font-weight: 500;
}

.item-price {
  color: #e74c3c;
  font-size: 15px;
  font-weight: 500;
  flex-shrink: 0;
}

.empty-tip {
  text-align: center;
  color: #bbb;
  padding: 30px 0;
}
</style>
